<title>房间列表 - {:getSettingOptionsCache('base.web_site_title') ?: '后台管理系统模板'}</title>
<!--表格插件css-->
<link rel="stylesheet" href="{:HTTP_STATIC_ADMIN_CDN_URL}js/bootstrap-table/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="{:HTTP_STATIC_ADMIN_CDN_URL}css/style.min.css">

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <header class="card-header">
                    <div class="card-title">房间列表</div>
                </header>
                <div class="card-body">

                    <form id="searchForm" class="row row-cols-lg-auto g-3 align-items-center">
                        <div class="col-12 mb-1">
                            <div class="input-group">
                                <span class="btn btn-default disabled-button-pointer">房间编号</span>
                                <input type="text" class="form-control" autocomplete="off" value="" id="room_id" name="room_id" placeholder="请输入房间编号">
                            </div>
                        </div>
                        <div class="col-12 mb-1">
                            <div class="input-group">
                                <div class="input-group-prepend search-bar">
                                    <input type="hidden" name="uid_keyword_field" class="search-field" value="uid">
                                    <button class="btn search-btn btn-default dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">房主id</button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="javascript:void(0)" data-field="uid">房主id</a>
                                        <a class="dropdown-item" href="javascript:void(0)" data-field="opposite_uid">玩家id</a>
                                    </div>
                                </div>
                                <input type="text" class="form-control" autocomplete="off" value="" id="uid_keyword_value" name="uid_keyword_value" placeholder="请输入关键词">
                            </div>
                        </div>
                        <div class="col-12 mb-1 d-flex lyear-select-mg-0">
                            <span class="btn btn-default disabled-button-pointer">房间状态</span>
                            <select name="state" class="exampleSelect" data-width="200px">
                                <option value="">全部</option>
                                <option value="1">开启</option>
                                <option value="2">关闭</option>
                            </select>
                        </div>
                        <div class="col-12 mb-1">
                            <button type="submit" class="btn btn-default me-1 sreach-all"><i class="mdi mdi-magnify"></i> 搜索</button>
                        </div>
                    </form>

                    <table id="table"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/layer/src/layer.js"></script>
<!--加载插件-->
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_CDN_URL}js/lyear-loading.js"></script>
<!--表格插件js-->
<script src="{:HTTP_STATIC_ADMIN_CDN_URL}js/bootstrap-table/bootstrap-table.js"></script>
<script src="{:HTTP_STATIC_ADMIN_CDN_URL}js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<!--socket-->
<script src="{:HTTP_STATIC_ADMIN_LOCAL_URL}js/common/md5.js"></script>
<script src="{:HTTP_STATIC_ADMIN_LOCAL_URL}js/common/socket/lib/message.js"></script>
<script src="{:HTTP_STATIC_ADMIN_LOCAL_URL}js/common/socket/socket.js"></script>

<script type="text/javascript">
    socketConnect("{:WEBSOCKET_IP}", "{:WEBSOCKET_PORT}", "{:WEBSOCKET_PRIVATE_KEY}")
    let objHtml = [
        {
            'title': '详情',
            'a-class': 'details-btn',
            'icon': 'mdi-view-list',
            'event': (event, value, row, index) => {
                openPage({
                    url: "{:url('/admin/room/details')}",
                    param: {
                        id: row.id
                    }
                }, '房间详情');
            },
        },
        {
            'title': '关闭房间',
            'a-class': 'close-btn',
            'icon': 'mdi-window-close',
            'event': (event, value, row, index) => {
                if (row.state === 2) {
                    showInfoNotify('房间已关闭');
                    return;
                }
                if(socket.socket.readyState !== WebSocket.OPEN){
                    showWarningNotify('Socket未连接');
                    return;
                }
                reconfirm({
                    url: "{:url('/admin/room/close')}",
                    param: {id: row.id},
                    success: (res) => {
                        if(res.code === 200){
                            refreshTable();
                            showInfoNotify('正在发送Socket信息...')
                            socketSend('systemCloseRoom', {
                                room_id: row.room_id,
                            }, (loader = $('body').lyearloading({
                                opacity: 0.2,
                                spinnerSize: 'lg'
                            })) => {loader.destroy();});
                        }
                    }
                }, '确定关闭房间吗？', '请再次确认是否关闭房间？');
            }
        },
    ];
    let state = {
        1: {
            200: {
                'name': '开启',
                'color': 'bg-success',
            }
        },
        2: {
            206: {
                'name': '关闭',
                'color': 'bg-secondary',
            },
            1006: {
                'name': '系统级-关闭',
                'color': 'bg-secondary',
            },
        },
        3: {
            'name': '错误',
            'color': 'bg-danger',
        }
    };
    let generationMethod = {
        1: {
            'name': '匹配',
            'color': 'bg-indigo',
        },
        2: {
            'name': '创建',
            'color': 'bg-teal',
        },
        3: {
            'name': '未知',
            'color': 'bg-danger',
        }
    }
    const requestUrl = "{:url('/admin/room/list')}";
    const columns = [{
        field: 'example',
        checkbox: true,
        // 是否可视(默认 - true)
        visible: true,
        // 列的宽度
        width: 2,
        // 宽度单位
        widthUnit: 'rem'
    }, {
        field: 'id',
        title: '编号',
        // 使用[align]，[halign]和[valign]选项来设置列和它们的标题的对齐方式。
        // h表示横向，v标识垂直
        align: 'center',
        switchable: false,
        // 列的宽度
        width: 5,
        // 宽度单位
        widthUnit: 'rem'
    }, {
        field: 'room_id',
        title: '房间编号',
        align: 'center',
        width: 8,
        // 宽度单位
        widthUnit: 'rem',
    }, {
        field: 'username',
        title: '房主',
        align: 'center',
        width: 10,
        // 宽度单位
        widthUnit: 'rem',
    }, {
        field: 'opposite_username',
        title: '玩家',
        align: 'center',
        width: 10,
        // 宽度单位
        widthUnit: 'rem',
    }, {
        field: 'generation_method',
        title: '生成方式',
        align: 'center',
        width: 6,
        // 宽度单位
        widthUnit: 'rem',
        formatter: function (value, row, index) {
            //如果不存在对象里则使用默认
            value = generationMethod[value] ? value : 3;
            return '<span class="badge ' + generationMethod[value].color + '">' + generationMethod[value].name + '</span>';
        }
    }, {
        field: 'state',
        title: '状态',
        width: 6,
        // 宽度单位
        widthUnit: 'rem',
        align: 'center',
        formatter: function (value, row, index) {
            //如果不存在对象里则使用默认
            let obj = (state[value] && state[value][row.state_code]) ? state[value][row.state_code] : state[3];
            return '<span class="badge ' + obj.color + '">' + obj.name + '</span>';
        }
    },  {
        field: 'addtime',
        title: '创建时间',
        width: 10,
        // 宽度单位
        widthUnit: 'rem',
        align: 'center',
        formatter: function (value, row, index) {
            return makeData(value);
        }
    }, {
        field: 'close_time',
        title: '关闭时间',
        width: 10,
        // 宽度单位
        widthUnit: 'rem',
        align: 'center',
        formatter: function (value, row, index) {
            return makeData(value);
        }
    }, {
        field: 'operate',
        title: '操作',
        align: 'center',
        width: 6,
        // 宽度单位
        widthUnit: 'rem',
        formatter: btnGroup(objHtml),  // 自定义方法
        events: btnEvents(objHtml)
    }];


</script>
<script type="text/javascript" src="{:HTTP_STATIC_ADMIN_LOCAL_URL}js/common/table.js"></script>
<script>
    $(function () {
        $('.sreach-all').click(function () {
            refreshTable();
        });

        $('#searchForm').submit(function(){
            event.preventDefault();
        });
    });

    //下拉框更新样式
    $('.exampleSelect').each(function() {
        var $this = $(this);
        $this.lyearSelect({
            width: $this.data('width') ? $this.data('width') : '', // width示例：75px、50%
            placeholder: $this.data('placeholder') ? $this.data('placeholder') : '请选择',
            search: $this.data('search') ? $this.data('search') : false,
        });
    });

    //下拉选择搜索项
    $('.search-bar .dropdown-menu a').click(function() {
        $(this).parents('.search-bar').find('.search-field').val(($(this).data('field') || ''));
        $(this).parents('.search-bar').find('.search-btn').html($(this).text());
    });
</script>